<template>
	<view class="profile-container">
		<!-- 用户信息 -->
		<view class="user-section">
			<view class="user-header">
				<text class="user-title">个人中心</text>
				<view class="settings-btn" @click="showSettings">
					<text class="iconfont icon-icon-cog" @click="showSettings"></text>
				</view>
			</view>
			<view class="user-info">
				<image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				<view class="user-details">
					<text class="user-name">{{ userInfo.name }}</text>
					<view class="user-role-info">
						<text class="user-role">{{ userInfo.role }}</text>
					</view>
					<view class="user-status">
						<text class="status-badge">在线</text>
						<text class="last-login">最后登录：{{ userInfo.lastLogin }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 工作统计 -->
		<view class="stats-section">
			<text class="section-title">工作统计</text>
			<view class="stats-grid">
				<view class="stat-item" v-for="(stat, index) in workStats" :key="index">
					<text class="stat-number" :class="stat.colorClass">{{ stat.value }}</text>
					<text class="stat-label">{{ stat.label }}</text>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<text class="section-title">功能菜单</text>
			<view class="menu-list">
				<view class="menu-item" v-for="(item, index) in filteredMenuItems" :key="index"
					@click="navigateTo(item.url)">
					<view class="menu-icon" :class="item.iconClass">
						<text class="iconfont" :class="item.icon"></text>
					</view>
					<text class="menu-text">{{ item.name }}</text>
					<view class="menu-badge" v-if="item.badge">
						{{ item.badge }}
					</view>
					<text class="iconfont icon-icon-arrow-right"></text>
				</view>
			</view>
		</view>

		<!-- 系统设置 -->
		<view class="settings-section">
			<text class="section-title">系统设置</text>
			<view class="settings-list">
				<view class="setting-item" v-for="(setting, index) in systemSettings" :key="index">
					<view style="display: flex;align-items: center;">
						<view class="setting-icon" :class="setting.iconClass">
							<text class="iconfont" :class="setting.icon"></text>
						</view>
						<text class="setting-name">{{ setting.name }}</text>
					</view>
					<view class="setting-control">
						<text class="setting-value" v-if="setting.value">{{ setting.value }}</text>
						<view class="toggle-switch" :class="{ active: setting.enabled }" @click="toggleSetting(index)"
							v-if="setting.type === 'toggle'">
							<view class="toggle-slider"></view>
						</view>
						<text class="iconfont icon-icon-arrow-right" v-if="setting.type === 'link'"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 帮助与支持 -->
		<view class="help-section">
			<text class="section-title">帮助与支持</text>
			<view class="help-list">
				<view class="help-item" v-for="(item, index) in helpItems" :key="index" @click="navigateTo(item.url)">
					<view class="help-icon" :class="item.iconClass">
						<text class="iconfont" :class="item.icon"></text>
					</view>
					<text class="help-text">{{ item.name }}</text>
					<text class="iconfont icon-icon-arrow-right"></text>
				</view>
			</view>
		</view>
		<!-- 公司信息 -->
		<view class="company-section">
			<text class="section-title">公司信息</text>
			<view class="company-list">
				<text class="company-title">公司名称</text>
				<text class="company-name">{{company.name}}</text>
			</view>
			<view class="company-list">
				<text class="company-title">注册码</text>
				<text class="company-name">{{company.code}}</text>
			</view>
			<view class="company-list">
				<text class="company-title">员工数量</text>
				<text class="company-name">{{company.member}}人</text>
			</view>
			<view class="company-list">
				<text class="company-title">版本信息</text>
				<text class="company-name">{{company.version}}</text>
			</view>
		</view>
		<!-- 退出登录 -->
		<button class="logout-btn" @click="logout">
			退出登录
		</button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue'
	import {
		permissionManager,
		ROLES
	} from '../../utils/permission.js'

	// 响应式数据
	const userInfo = reactive({
		id: '',
		name: '张经理',
		role: '采购部 | 高级采购员',
		avatar: '/static/logo.png',
		lastLogin: '今天 08:30',
		userRole: permissionManager.getUserRoleInfo()
	})

	// 公司数据
	const company = reactive({
		name: '广州杰尔汽车进出口有限公司',
		code: 'GZ0545555',
		member: 24,
		version: 'v1.0.0',
	})

	const workStats = ref([{
			label: '处理中车辆',
			value: '156',
			colorClass: 'blue-number'
		},
		{
			label: '本月完成',
			value: '89',
			colorClass: 'green-number'
		},
		{
			label: '待处理',
			value: '12',
			colorClass: 'orange-number'
		}
	])

	const menuItems = ref([{
			name: '我的车辆',
			icon: 'icon-car',
			iconClass: 'blue-icon',
			url: '/pages/vehicle-list/vehicle-list',
			visibleFor: [ROLES.PURCHASER, ROLES.BUSINESS, ROLES.LOGISTICS, ROLES.DATA_MAINTAINER, ROLES.FINANCE,
				ROLES.ADMIN
			]
		},
		// {
		// 	name: '工作报表',
		// 	icon: 'icon-chart-line',
		// 	iconClass: 'green-icon',
		// 	url: '/pages/reports/reports',
		// 	visibleFor: [ROLES.DATA_MAINTAINER, ROLES.ADMIN]
		// },
		{
			name: '消息通知',
			icon: 'icon-bell',
			iconClass: 'orange-icon',
			url: '/pages/notifications/notifications',
			badge: '3',
			visibleFor: [ROLES.PURCHASER, ROLES.BUSINESS, ROLES.LOGISTICS, ROLES.DATA_MAINTAINER, ROLES.FINANCE,
				ROLES.ADMIN
			]
		},
		// {
		// 	name: '权限管理',
		// 	icon: 'icon-shield-alt',
		// 	iconClass: 'red-icon',
		// 	url: '/pages/permission/permission',
		// 	visibleFor: [ROLES.ADMIN]
		// },
		// {
		// 	name: '权限测试',
		// 	icon: 'icon-vial',
		// 	iconClass: 'yellow-icon',
		// 	url: '/pages/test-permission/test-permission',
		// 	visibleFor: [ROLES.PURCHASER, ROLES.BUSINESS, ROLES.LOGISTICS, ROLES.DATA_MAINTAINER, ROLES.FINANCE,
		// 		ROLES.ADMIN
		// 	]
		// }
	])

	const systemSettings = ref([{
			name: '推送通知',
			icon: 'icon-bell',
			iconClass: 'blue-icon',
			type: 'toggle',
			enabled: true
		},
		{
			name: '隐私设置',
			icon: 'icon-shield-alt',
			iconClass: 'green-icon',
			type: 'link',
			url: '/pages/privacy/privacy'
		},
		{
			name: '语言设置',
			icon: 'icon-language',
			iconClass: 'purple-icon',
			type: 'link',
			value: '简体中文',
			url: '/pages/language/language'
		},
		{
			name: '深色模式',
			icon: 'icon-moon',
			iconClass: 'orange-icon',
			type: 'toggle',
			enabled: false
		}
	])

	const helpItems = ref([{
			name: '使用帮助',
			icon: 'icon-question-circle',
			iconClass: 'blue-icon',
			url: '/pages/help/help'
		},
		{
			name: '联系客服',
			icon: 'icon-headset',
			iconClass: 'green-icon',
			url: '/pages/support/support'
		},
		{
			name: '关于我们',
			icon: 'icon-info-circle',
			iconClass: 'purple-icon',
			url: '/pages/about/about'
		}
	])

	// 计算属性
	const filteredMenuItems = computed(() => {
		const userRole = userInfo.userRole.role
		return menuItems.value.filter(item =>
			item.visibleFor.includes(userRole) || item.visibleFor.includes(ROLES.ADMIN)
		)
	})

	// 方法
	const showSettings = () => {
		uni.navigateTo({
			url: '/pages/settings/settings'
		})
	}

	const navigateTo = (url) => {
		if (url) {
			uni.navigateTo({
				url: url
			})
		}
	}

	const toggleSetting = (index) => {
		systemSettings.value[index].enabled = !systemSettings.value[index].enabled
		// 根据设置类型执行相应操作
		const setting = systemSettings.value[index]
		if (setting.name === '推送通知') {
			uni.showToast({
				title: setting.enabled ? '推送已开启' : '推送已关闭',
				icon: 'none'
			})
		} else if (setting.name === '深色模式') {
			uni.showToast({
				title: setting.enabled ? '深色模式已开启' : '深色模式已关闭',
				icon: 'none'
			})
		}
	}

	const checkUpdate = () => {
		uni.showLoading({
			title: '检查更新中...'
		})

		setTimeout(() => {
			uni.hideLoading()
			uni.showToast({
				title: '已是最新版本',
				icon: 'success'
			})
		}, 2000)
	}

	const logout = () => {
		uni.showModal({
			title: '确认退出',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: '退出成功',
						icon: 'success'
					})
					// 这里可以执行退出登录的逻辑
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}, 1000)
				}
			}
		})
	}

	// 生命周期
	onMounted(() => {
		loadUserInfo()
	})

	const loadUserInfo = () => {
		const user = uni.getStorageSync('user');
		if (user) {
			const parsedUser = JSON.parse(user);
			// status.value = parsedUser.status
			// userInfo.avatar = parsedUser.avatar || '/static/avatar.png';
			userInfo.name = parsedUser.name || '';
			userInfo.id = parsedUser.id || '';
			// userInfo.isVerified = parsedUser.isVerified || false;
			// userInfo.isSeller = parsedUser.isSeller || false;
		}
	}
</script>

<style scoped>
	.profile-container {
		background-color: #F7F8F9;
		min-height: 100vh;
	}

	.user-section {
		background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
		color: white;
		padding: 24px;
	}

	.user-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;
	}

	.user-title {
		font-size: 20px;
		font-weight: bold;
	}

	.settings-btn {
		width: 32px;
		height: 32px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.user-avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		margin-right: 16px;
	}

	.user-details {
		flex: 1;
	}

	.user-name {
		font-size: 20px;
		font-weight: bold;
		display: block;
		margin-bottom: 4px;
	}

	.user-role {
		font-size: 14px;
		opacity: 0.8;
		display: block;
		margin-bottom: 8px;
	}

	.user-status {
		display: flex;
		align-items: center;
	}

	.status-badge {
		padding: 4px 8px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 12px;
		font-size: 12px;
		margin-right: 8px;
	}

	.last-login {
		font-size: 12px;
		opacity: 0.8;
	}

	.stats-section,
	.menu-section,
	.settings-section,
	.help-section,
	.company-section {
		background: #FFFFFF;
		margin: 32rpx;
		border-radius: 12px;
		padding: 32rpx;
		box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
	}

	.section-title {
		font-size: 16px;
		font-weight: 600;
		color: #1F2937;
		display: block;
		margin-bottom: 16px;
	}

	.company-title {
		color: #6B7280;
	}

	.company-name {
		font-weight: 500;
	}

	.stats-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 16px;
	}

	.stat-item {
		text-align: center;
	}

	.stat-number {
		font-size: 24px;
		font-weight: bold;
		display: block;
		margin-bottom: 4px;
	}

	.blue-number {
		color: #3b82f6;
	}

	.green-number {
		color: #10b981;
	}

	.orange-number {
		color: #f97316;
	}

	.stat-label {
		font-size: 12px;
		color: #6b7280;
	}

	.menu-list,
	.settings-list,
	.help-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.company-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0;
	}

	.menu-item,
	.setting-item,
	.help-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px;
		background: #f9fafb;
		border-radius: 8px;
	}

	.menu-icon,
	.setting-icon,
	.help-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
	}

	.blue-icon {
		background: #dbeafe;
		color: #3b82f6;
	}

	.green-icon {
		background: #dcfce7;
		color: #10b981;
	}

	.purple-icon {
		background: #f3e8ff;
		color: #8b5cf6;
	}

	.orange-icon {
		background: #fed7aa;
		color: #f97316;
	}

	.yellow-icon {
		background: #fef3c7;
		color: #f59e0b;
	}

	.menu-text,
	.setting-name,
	.help-text {
		flex: 1;
		font-size: 14px;
		color: #1f2937;
	}

	.menu-arrow,
	.help-arrow {
		color: #9ca3af;
		font-size: 12px;
	}

	.menu-badge {
		background: #ef4444;
		color: white;
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 10px;
	}


	.setting-control {
		display: flex;
		align-items: center;
	}

	.setting-value {
		font-size: 12px;
		color: #6b7280;
		margin-right: 8px;
	}

	.toggle-switch {
		width: 40px;
		height: 24px;
		background: #d1d5db;
		border-radius: 12px;
		position: relative;
		transition: background-color 0.3s;
	}

	.toggle-switch.active {
		background: #3b82f6;
	}

	.toggle-slider {
		width: 16px;
		height: 16px;
		background: white;
		border-radius: 50%;
		position: absolute;
		top: 4px;
		left: 4px;
		transition: transform 0.3s;
	}

	.toggle-switch.active .toggle-slider {
		transform: translateX(16px);
	}


	.logout-btn {
		background: #DC2626;
		color: white;
		border-radius: 8px;
		height: 100rpx;
		line-height: 100rpx;
		margin: 32rpx;
		font-weight: 600;
		letter-spacing: 5rpx;

	}

	.logout-btn::after {
		border: none;
	}
</style>